<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body,html{
            width: 100vw;
            height: 100vh;
            background-color: rgb(230, 230, 230);
        }
        .box{
            width: 1152px;
            height: 100%;
            margin: 0 auto;
            padding: 50px 100px;
            background-color: white;
        }
        .center{
            width: 857px;
            height: 100%;
            margin: 0 auto;
            padding: 100px 150px;
            border: 1px solid black;
        }
        select{
            outline:none;
            width: 110px;
            height: 29px;
        }
        .lian{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .word{
            display: flex;
            height: 29px;
            font-size: 20px;
            line-height: 29px;
        }
        .tta{
            width: 100%;
            height: 100px;
            margin-top: 50px;
        }
        textarea{
            display: block;
            resize:none;
            padding: 15px;
            background-color: transparent;
            outline: none;
            /* border: none; */
            width: 100%;
            height: 100%;
            color: #444;
            font-size: 20px;
        }
        button{
            cursor: pointer;
            float: right;
            margin-top: 50px;
            outline: none;
            width: 100px;
            height: 50px;
            border-radius: 9px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="center">
            <div class="lian">
                <div class="provinceArea word">
                    省区：
                    <select id="province" value="1">
                    </select>
                </div>
                <div class="cityArea word">
                    市区：
                    <select id="city" value="1">
                    </select>
                </div>
                <div class="countyArea word">
                    县区：
                    <select id="area" value="1">
                    </select>
                </div>
            </div>
            <div class="tta">
                <textarea value="" placeholder="请输入地址"></textarea>
            </div>
            <button>提交</button>
        </div>
    </div>
</body>
<script src="./js/areaList.js"></script>
<script>
    window.onload = function () {
        let province = document.getElementById('province');
        let city = document.getElementById('city');
        let area = document.getElementById('area');
        //省区
        let provinceList = areaList['province_list'];
         //市
        let cityList = areaList['city_list'];
        //区、县
        let countyList = areaList['county_list'];


        //遍历省区
        let html = '';
        for (let i in provinceList) {
            html += `
                <option data-value="${i}">${provinceList[i]}</option>
            `;
            province.innerHTML = html;
        }
        //市区的函数
        let yione = () =>{
            let inshu = province.selectedIndex;
            let value =province.options[inshu].value;
            let valueshu =province.options[inshu].dataset.value;
            // console.log(inshu);
            // console.log(value);
            // console.log(valueshu);
            //es6 查找开头两位
            let one = valueshu.slice(0,2)
            // console.log(one);
            let html2 = '';
            //遍历市区
            for (let j in cityList) {
                if (j.startsWith(one)) {
                    html2 += `
                        <option data-value="${j}">${cityList[j]}</option>
                        `;
                    }
                city.innerHTML = html2; 
            }
        }



        //县区的函数
        let erone = () =>{
            let inshu1 = city.selectedIndex;
            let value1 =city.options[inshu1].value;
            let valueshu1 =city.options[inshu1].dataset.value;
            // console.log(inshu1);
            // console.log(value1);
            // console.log(valueshu1);
            //es6 查找开头四位
            let tow = valueshu1.slice(0,4)
            // console.log(tow);
            let html3 = '';
            //遍历县区
            for (let o in countyList) {
                if (o.startsWith(tow)) {
                    html3 += `
                        <option data-value="${o}">${countyList[o]}</option>
                        `;
                    }
                area.innerHTML = html3; 
            }
        }
        //初始化省区和市区
        yione();

        //初始化县区
        erone();

        province.onchange =  ()=>{
            yione();
            erone();
        }

        city.onchange = ()=>{
            erone();
        }


        let button = document.querySelector('button');
        //textarea添加内容的函数
        let dianji = () => {
            let textarea = document.querySelector('textarea');
            let provinceDian = province.value;
            let cityDian = city.value;
            let areaDian = area.value;
            textarea.value = provinceDian + cityDian + areaDian;
            // console.log(provinceDian,cityDian,areaDian);
        }
        //点击添加内容
        button.onclick = ()=>{
            dianji();
            console.log('提交成功！！！！');
            alert('提交成功！！！')
        }

    }
</script>
</html>